<template>
    <div class="cellbox">
			<div class="cell" v-for="item in cells" :key="item.index" @click="clickCell(item.index,$event)" @mouseenter="mouseenter(item.index,$event)" :class="{'notallowed' : !item.allow}" @mouseleave="mouseleave(item.index)"></div>
<!--:style="cellMoseStyle(item.index)"-->
			<div class="line line1"></div>
			<div class="line line2"></div>
			<div class="line line3"></div>
    </div>
</template>
<script type="es6">
import eventBus from '@/libs/eventBus';
import {lengthTimestramp} from '@/libs';
export default {
  data () {
    return {
      timelist: [[0, 15], [15, 30], [30, 45], [45, 60]],
      cells: [
        {index: 0, allow: true},
        {index: 1, allow: true},
        {index: 2, allow: true},
        {index: 3, allow: true}
      ]
    };
  },
  props: {
    wholePoint: {
      type: Number,
      default: 0
    },
    operatingState: {
      type: String,
      default: 'wait'
    },
    day: {
      type: String,
      default: ''
    },
    timestamp: {
      type: Number,
      default: 0
    },
    row: {
      type: Object,
      default: () => {
        return {};
      }
    },
    index: {
      type: Number,
      default: 0
    }
  },
  components: {},
  computed: {},
  methods: {
    updateCellAllow () {
      this.cells.forEach((item, index) => {
        let len = Date.now() - this.getTimestamp(this.wholePoint, this.timelist[index][0]);
        if ((len / 60000) > 15) {
          item.allow = false;
        } else {
          item.allow = true;
        }
      });
    },
    cellMoseStyle (index) {
      let map = {};

      return map;
    },
    clickCell (item, event) {
      if (!this.cells[item].allow) {
        return;
      }
      if (this.operatingState === 'wait' || this.operatingState === 'selection') {
        let timeregion = [this.getTimestamp(this.wholePoint, this.timelist[item][0]), this.getTimestamp(this.wholePoint, this.timelist[item][1])];
        eventBus.$emit('choseTimeCell', {time: timeregion, row: this.row, index: this.index});
      }
    },
    getTimestamp (H, M) {
      return lengthTimestramp(this.timestamp, 0, H, M);
    },
    mouseenter (item, event) {
      if (!this.cells[item].allow) {
        eventBus.$emit('notAllowCell', event);
      }
      if (this.operatingState === 'selection' || this.operatingState === 'minTime') {
        let timeregion = [this.getTimestamp(this.wholePoint, this.timelist[item][0]), this.getTimestamp(this.wholePoint, this.timelist[item][1])];

        eventBus.$emit('mouseenterTimeCell', {time: timeregion, row: this.row, index: this.index});
      }
    },
    mouseleave (item) {
      eventBus.$emit('notAllowCellleave');
    }
  },
  mounted () {
    this.updateCellAllow();
  },
  watch: {
    day () {
      this.updateCellAllow();
    }
  },
  destroyed () {
  }
};
</script>
<style lang="less" scoped>
	.cellbox{
		width: 100%;
		height: 100%;
		position: relative;
		.cell{
			width: 25%;
			float: left;
			height: 100%;
			cursor: pointer;
		}
		.line{
			width: 0px;
			height: 100%;
			position: absolute;
			border-right: 1px dashed #ccc;
			pointer-events: none;
		}
		.line1{
			left: 25%;
		}
		.line2{
			left: 50%;
		}
		.line3{
			left: 75%;
		}
	}
	.notallowed{
		background: #f5f5f5;
		cursor: not-allowed;
	}
</style>
